<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<th:block th:fragment="enable_blogger">
    <th:block th:replace="~{modules/common/blogger :: blogger}" />
</th:block>
<th:block th:fragment="enable_notice(notice_data)">
    <section class="joe_aside__item notice">
        <div class="joe_aside__item-title">
            <!--      <#&#45;&#45;  <i class="joe-font joe-icon-speaker"></i>  &ndash;&gt;-->
            <th:block th:replace="~{modules/macro/speaker :: speaker}" />
            <span class="text">[[${notice_data.notice_title}]]</span>
        </div>
        <div class="joe_aside__item-contain">
            <div class="notice_content" th:utext="${notice_data.site_notice}"></div>
        </div>
    </section>
</th:block>
<th:block th:fragment="enable_picture(pic_data)">
    <section class="joe_aside__item qrcode">
        <div class="joe_aside__item-title">
            <i class="joe-font joe-icon-qrcode"></i>
            <span class="text">[[${pic_data.qrcode_title}]]</span>
        </div>
        <div class="joe_aside__item-contain">
            <img class="qrcode_img lazyload" th:src="${pic_data.qrcode_url}" th:data-src="${pic_data.qrcode_url}" th:alt="${pic_data.qrcode_title}"/>
            <th:block th:if="${pic_data.qrcode_description != ''}">
                <p class="qrcode_description">[[${pic_data.qrcode_description}]]</p>
            </th:block>
        </div>
    </section>
</th:block>
<th:block th:fragment="enable_music_player(music_data)">
<th:block th:if="${music_data.music_id != ''}">
    <section class="joe_aside__item timelife">
        <div class="joe_aside__item-title">
            <i class="joe-font joe-icon-yinfu"></i>
            <span class="text">我的歌单</span>
        </div>
        <div id="aplayer" class="aplayer" th:data-id="${music_data.music_id}" list-max-height="20px" data-server="netease" data-type="playlist" data-fixed="false" data-listfolded="true" data-order="random"  data-mode="#f3f3f7"></div>
    </section>
</th:block>
</th:block>
<th:block th:fragment="enable_newest_post">
    <th:block th:replace="~{modules/macro/latest :: latest}" />
</th:block>
<th:block th:fragment="enable_lifetime">
    <section class="joe_aside__item timelife">
        <div class="joe_aside__item-title">
            <i class="joe-font joe-icon-shalou"></i>
            <span class="text">人生倒计时</span>
        </div>
        <div class="joe_aside__item-contain"></div>
    </section>
</th:block>
<th:block th:fragment="show_newreply(new_reply_data)">
<th:block th:if="${theme.config.other.enable_clean_mode !=true}">
    <section class="joe_aside__item newreply">
        <div class="joe_aside__item-title">
            <i class="joe-font joe-icon-message"></i>
            <span class="text">最新回复</span>
        </div>

        <ul class="joe_aside__item-contain"
            th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline.waline_serverURL) ==''}">
            <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline.waline_serverURL) ==''}"
                    th:each="result : ${commentFinder.list(null,1,new_reply_data.show_newreply_num)}">
                <li class="item">
                    <div class="user">
                        <img width="35" height="35" class="avatar lazyload" th:data-src="${result.owner.avatar ?: '/themes/theme-Joe3/assets/img/peeps-avatar.png'} " th:src="${theme.config.blogger.lazyload_avatar}"  alt="头像">
                        <div class="info">
                            <div class="author">[[${result.owner.displayName}]]</div>
                            <span class="date">[[${#temporals.format(result.spec.creationTime, 'yyyy-MM-dd HH:mm:ss')}]]</span>
                        </div>
                    </div>
                    <div class="reply">
                        <!--        <th:block th:with="post = ${postFinder.getByName(postMate.name)}">-->

                        <th:block th:if="${result.spec.subjectRef.kind == 'SinglePage'}  and ${result.spec.subjectRef.name != 'links'}">
                            <th:block th:with="singlePage = ${singlePageFinder.getByName(result.spec.subjectRef.name)}">
                        <a class="link aside-reply-content"
                           th:href="@{${singlePage.status.permalink}}">
                            <p>[[${result.spec.content}]]</p>
                        </a>
                            </th:block>
                        </th:block>
                        <th:block th:if="${result.spec.subjectRef.kind == 'SinglePage'}  and ${result.spec.subjectRef.name == 'links'}">
                                <a class="link aside-reply-content"
                                   th:href="@{/links}">
                                    <p>[[${result.spec.content}]]</p>
                                </a>
                        </th:block>
                        <th:block th:if="${result.spec.subjectRef.kind == 'Post'}">
                            <th:block th:with="post = ${postFinder.getByName(result.spec.subjectRef.name)}">
                                <a class="link aside-reply-content"
                                   th:href="@{${post.status.permalink}}">
                                    <p>[[${result.spec.content}]]</p>
                                </a>
                            </th:block>
                        </th:block>
                        <th:block th:if="${result.spec.subjectRef.kind == 'Moment'}">
                            <a class="link aside-reply-content"
                               th:href="@{/moments}">
                                <p>[[${result.spec.content}]]</p>
                            </a>
                        </th:block>
                        <!--        </th:block>-->
                    </div>
                </li>

            </th:block>
        </ul>
        <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline.waline_serverURL) !=''}">
        <ul class="joe_aside__item-contain" id="waline-recent">
        </ul>
            <style>
                .reply img{
                    display: inline-block;
                    height: 24px;
                    max-width: 100%;}
            </style>
            <script type="module" th:inline="javascript">
                import { RecentComments } from /*[[${theme.config.basic.waline.waline_js_leaving}]]*/'';

                RecentComments({
                    serverURL: /*[[${theme.config.basic.waline.waline_serverURL}]]*/'',
                    count: /*[[${new_reply_data.show_newreply_num}]]*/5,
                }).then(({ comments }) => {
                    document.getElementById('waline-recent').innerHTML = comments.map(
                        (comment) =>{
                            const commentContent = document.createElement('div');
                            let commentText =''
                            commentContent.innerHTML = comment.comment;
                            const hasAnchor = commentContent.querySelector('a') !== null;
                            if (hasAnchor) {
                                 commentText = commentContent.textContent;
                            }else {
                                 commentText = commentContent.outerHTML || commentContent.textContent;
                            }

                            const timestamp = new Date(comment.time);

                            // 获取年、月、日、时、分、秒
                            const year = timestamp.getFullYear();
                            const month = timestamp.getMonth() + 1; // 月份是从0开始的，所以要加1
                            const day = timestamp.getDate();
                            const hours = timestamp.getHours();
                            const minutes = timestamp.getMinutes();
                            const seconds = timestamp.getSeconds();

                            // 构建日期时间字符串
                            const commentTime = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day} ${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;

                            return `<li class="item">
                    <div class="user">
                        <img width="35" height="35" class="avatar lazyload" data-src="${comment.avatar}" src="${ThemeConfig.lazyload_avatar}"  alt="头像">
                        <div class="info">
                            <div class="author">${comment.nick}</div>
                            <span class="date">${commentTime}</span>
                        </div>
                    </div>
                    <div class="reply">
                    <a href="${comment.url}" class="link aside-reply-content">${commentText}</a>
                    </div>`;

                        }).join('');

                });
            </script>
        </th:block>

    </section>
</th:block>
</th:block>
<th:block th:fragment="enable_tag_cloud(tag_cloud_data)">
    <section class="joe_aside__item tags-cloud" id="tags-cloud">
        <div class="joe_aside__item-title">
            <i class="joe-font joe-icon-tag"></i>
            <span class="text">标签云</span>

            <a class="tags_more" th:href="@{/tags}">更多<i class="joe-font joe-icon-more-right"></i></a>

        </div>
        <div class="joe_aside__item-contain">

            <div th:class="'tags-cloud-list '+${tag_cloud_data.tag_cloud_width =='responsive' ? 'responsive':'static'}" th:style="${tag_cloud_data.tag_cloud_type == '3d' ? 'display:none':''}">
                <th:block th:with="tags = ${tagFinder.listAll()}">

                    <a th:each="tag : ${tags}"
                       th:data-url="@{${tag.status.permalink}}" th:data-label="${tag.spec.displayName}" th:href="@{${tag.status.permalink}}" th:title="${tag.spec.displayName}">[[${tag.spec.displayName}]]</a>
                </th:block>

            </div>
            <th:block th:if="${tag_cloud_data.tag_cloud_type == '3d'}">
                <div id="tags-3d">
                    <div class="empty">加载中…</div>
                </div>
            </th:block>
        </div>
        <!--    <#else>-->
        <!--    <div class="empty">暂无标签</div>-->
        <!--  </#if>-->
        <!--</@tagTag>-->
    </section>
</th:block>
<th:block th:fragment="enable_ads_aside(ads_data)">
    <th:block th:switch="${ads_data.aside_ads_type}">
        <th:block th:case="'img'">
            <th:block th:if="${#strings.trim(ads_data.aside_ads_img) !=''}">
                <th:block th:replace="~{modules/ads/ads_aside :: ads_aside_img(ads_url=${ads_data.aside_ads_url}, ads_img=${ads_data.aside_ads_img})}" />
            </th:block>
        </th:block>
        <th:block th:case="'code'">
                <th:block th:replace="~{modules/ads/ads_aside :: ads_aside_code(ads_code = ${ads_data.aside_ads_code})}" />
        </th:block>

    </th:block>

</th:block>
<th:block th:fragment="enable_custom(custom_data)">
    <section class="joe_aside__item aside_custom">
        <th:block th:utext="${custom_data.aside_custom_code}"></th:block>

    </section>
</th:block>
</html>